<template>
  <div id="app" class="content">
    <Navbar />
    <template>
      <div style="display: flex;height: auto;">
        <clock size="70px"></clock>
        <aplayer
          :music="audio[0]"
          :list="audio"
          :showlrc="false"
          fixed
          :listFolded="true"
          :autoplay="true"
          listMaxHeight="200px"
          style="width: 43%; position: absolute; z-index: 10;right: 0%"
          v-if="audio.length"/>
      </div>
      <beautiful-chat
        style="position: absolute; z-index: 10"
        :participants="participants"
        :titleImageUrl="titleImageUrl"
        :onMessageWasSent="onMessageWasSent"
        :messageList="messageList"
        :newMessagesCount="newMessagesCount"
        :isOpen="isChatOpen"
        :close="closeChat"
        :open="openChat"
        :showEmoji="false"
        :showEdition="true"
        :showDeletion="true"
        :showTypingIndicator="showTypingIndicator"
        :showLauncher="true"
        :showCloseButton="true"
        :colors="colors"
        :alwaysScrollToBottom="alwaysScrollToBottom"
        :disableUserListToggle="false"
        :messageStyling="messageStyling"
        @onType="handleOnType"
        @edit="editMessage"></beautiful-chat>
    </template>
    <router-view />
    <br v-for="index in 10" :key="index" />
    <div class="wrapper">
      <Footer />
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue'
import Footer from '@/components/Footer.vue'
import axios from 'axios'
import aplayer from 'vue-aplayer'
import Clock from 'vue-clock2'

export default {
  name: 'App',
  components: {
    Clock,
    Navbar,
    aplayer,
    Footer
  },
  data: function () {
    return {
      audio: [],
      time: new Date(),
      participants: [
        {
          id: 'AI-DQ',
          name: '可爱的AI😀',
          imageUrl: 'https://www.duanqing.online:9000/pic/34x34.gif'
        }
        // {
        //   id: 'user2',
        //   name: 'Support',
        //   imageUrl: 'https://www.duanqing.online:9000/blog/05eef6bc-2053-4cae-979c-58160946cae9.gif'
        // }
      ], // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
      titleImageUrl: 'https://www.duanqing.online:9000/pic/34x34.gif',
      messageList: [
        { type: 'text', author: 'AI-DQ', data: { text: '欢迎来到我的博客,我能有什么能够帮助您的嘛~~~~~~~~' } }
      ], // the list of the messages to show, can be paginated and adjusted dynamically
      newMessagesCount: null, // 提示多少消息未读
      isChatOpen: false, // to determine whether the chat window should be open or closed
      showTypingIndicator: '', // when set to a value matching the participant.id it shows the typing indicator for the specific user
      colors: {
        header: {
          bg: '#4e8cff',
          text: '#ffffff'
        },
        launcher: {
          bg: '#ff6c37'
        },
        messageList: {
          bg: '#ffffff'
        },
        sentMessage: {
          bg: '#4e8cff',
          text: '#ffffff'
        },
        receivedMessage: {
          bg: '#eaeaea',
          text: '#222222'
        },
        userInput: {
          bg: '#f4f7f9',
          text: '#565867'
        }
      }, // specifies the color scheme for the component
      alwaysScrollToBottom: true, // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
      messageStyling: true // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
    }
  },
  methods: {
    getMusicListInfo: function () {
      axios({
        url: '/api/blog/musicInfo/list',
        method: 'post',
        data: {}
      }).then(async (res) => {
        this.audio = res.data.data
      })
    },
    sendMessage (text) {
      if (text.length > 0) {
        this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
        this.onMessageWasSent({ author: 'support', type: 'text', data: { text } })
      }
    },
    async onMessageWasSent (message) {
      let data
      console.log(message)
      message.imageUrl = 'https://www.duanqing.online:9000/pic/34x34.gif'
      this.participants[1] = {
        id: 'me',
        name: '我',
        imageUrl: 'https://www.duanqing.online:9000/pic/34x34.gif'
      }
      console.log(this.participants)
      this.messageList = [...this.messageList, message]
      this.showTypingIndicator = 'AI-DQ'
      await axios({
        url: '/api/blog/ai/ask?question=' + message.data.text + '&type=' + message.type,
        method: 'get'
      }).then(async (res) => {
        data = res.data
      })
      await this.setValue(data)
    },
    async setValue (data) {
      if (data.resp_code === 0) {
        const newMessage = {
          type: 'text',
          author: 'AI-DQ',
          imageUrl: data.data.imageUrl,
          data: {
            text: data.data.content
          }
        }
        this.messageList = [...this.messageList, newMessage]
        this.showTypingIndicator = ''
        console.log(this.messageList)
      }
    },
    openChat () {
      // called when the user clicks on the fab button to open the chat
      this.isChatOpen = true
      this.newMessagesCount = 0
    },
    closeChat () {
      // called when the user clicks on the botton to close the chat
      this.isChatOpen = false
    },
    handleScrollToTop () {
      // called when the user scrolls message list to top
      // leverage pagination for loading another page of messages
    },
    handleOnType () {
    },
    editMessage (message) {
      const m = this.messageList.find(m => m.id === message.id)
      m.isEdited = true
      m.data.text = message.data.text
    }
  },
  mounted () {
    this.getMusicListInfo()
  }
}
</script>

<style>
.w-full {
  width: 100% !important;
}

.w-full .vs-card__text {
  width: 100%;
}
.sc-chat-window {
  height: 50% !important;
}
</style>
